<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>改变鼠标样式和指向</title>
</head>
<body>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        html{
            cursor: none;
        }
        .pointer{
            position: fixed;
            width: 32px;
            height: 32px;
            margin-left: -16px;
        }
    </style>
    <div class="pointer">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 20h18L12 4z"/></svg>
    </div>
    <script>
        const pointer = document.querySelector(".pointer");
        let rad = 0;
        window.onmousemove=(e)=>{
            console.log(e.movementX,e.movementY)
            if(Math.abs(e.movementX) + Math.abs(e.movementY)>6){
                rad = Math.atan2(e.movementX,-e.movementY);
            }
            pointer.style.transform=`translate(${e.clientX}px,${e.clientY}px) rotate(${rad}rad)`
        }
    </script>
</body>
</html>